<template>
  <div id="graph" style="height: 100%; width: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
import PersonData from "../../assets/json/StarDiagram/data.json";
import LinkDataAll from "../../assets/json/StarDiagram/DataEdgeAll.json";
import LinkData from "../../assets/json/StarDiagram/DataEdge.json";

export default {
  data() {
    return {
      PersonData,
      LinkDataAll,
      LinkData,
    };
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("graph"));
    var option = {
      tooltip: {
        trigger: "item",
        formatter: function (params) {
          var data = params.data;
          var html = "";
          if (data.source && data.target) {
            // 边的提示框
            html += "<div>" + data.source + " - " + data.target + "</div>";
            html += "<div>" + data.type + "</div>";
          } else {
            // 节点的提示框
            html += "<div>" + data.name + "</div>";
            html += "<div>" + data.desc + "</div>";
          }
          return html;
        },
      },
      legend: {
        show: true,
        top: "top",
        left: "left",
      },
      series: [
        {
          type: "graph",
          layout: "force",
          animation: false,
          data: PersonData.李白,
          links: LinkDataAll,
          roam: true,

          label: {
            show: true,
            // position: "right",
            formatter: "{b}",
          },

          force: {
            // edgeLength: Math.floor(Math.random() * 700)+100,
            repulsion: 2000,
            gravity: 0.1, // 节点的引力
            layoutAnimation: false, // 是否开启布局动画
          },
          categories: [
            {
              name: "本人",
              // show: true,
              itemStyle: {
                color: "#8E354A",
              },
              symbolSize: 100,
            },
            {
              name: "亲属",
              itemStyle: {
                color: "#C17D11",
              },
              symbolSize: 80,
            },
            {
              name: "社交",
              itemStyle: {
                color: "#177CB0",
              },
              symbolSize: 60,
            },
            {
              name: "师生",
              itemStyle: {
                color: "#008451",
              },
              symbolSize: 60,
            },
            {
              name: "学术关系",
              itemStyle: {
                color: "#FF99B3",
              },
              symbolSize: 30,
            },
            {
              name: "朋友",
              itemStyle: {
                color: "#FCF16E",
              },
              symbolSize: 0,
            },
            {
              name: "政治关系",
              itemStyle: {
                color: "#E60012",
              },
              symbolSize: 40,
            },
          ],

          animationDuration: 0, // 设置动画时长为0
          animationDurationUpdate: 0, // 设置更新动画时长为0
        },
      ],
    };

    function generateGraph(data) {
      // 更新关系图的配置
      option.series[0].data = data.nodes;
      // option.series[0].links = data.links;
      // console.log(option.series[0].data);
      // console.log(option.series[0].links);
      // 应用更新后的配置到图表
      myChart.setOption(option);
    }
    // 点击事件的回调函数
    myChart.on("click", function (params) {
      if (params.dataType === "node") {
        var nodeName = params.name;
        console.log(nodeName); // 在控制台打印节点的名字
        if (PersonData[nodeName]) {
          // 根据节点名称切换数据
          generateGraph({
            nodes: PersonData[nodeName],
            // links: LinkData[nodeName],
          });
        }
      }
    });

    myChart.setOption(option);
  },
};
</script>
